@extends('lottery.layout')
@section('title')
    义乌购红牛健康月大转盘抽奖
    @stop
@section('content')
    <div class="lottery" style="background: url(http://wechat-yiwugou.img-cn-hangzhou.aliyuncs.com/wechat-news/20160815143338403.jpg@750w)top center no-repeat;background-size:contain;">
        <p class="prizeListLink"><a href="{{route('lottery.prizeList').'?lottery_id='.$lotteryId}}">中奖</br>列表</a></p>
        <div class="tips">
            @if($prizeTimes==0)
                <p>您还有<span>0</span>次抽奖机会</p>
                @elseif($prizeTimes==200)
                <p class="showPrize"><a href="{{route('lottery.showPrize').'?lottery_id='.$lotteryId}}">查看兑奖信息</a></p>
                @else
                <p>您还有<span>1</span>次抽奖机会</p>
            @endif
        </div>
        <div class="lotteryBox">
            <ul>
                @if($prizeTimes==0)
                    <li class="center"><img src="/img/lottery/center.png"></li>
                @elseif($prizeTimes==200)
                    <li class="center"><img src="/img/lottery/center.png"></li>
                @else
                    <li class="center">
                        <img src="/img/lottery/center.png" id="back" style="display: none">
                        <img src="/img/lottery/center.png" id="lotteryBtn"></li>
                @endif
                <li class="centerBack"><img src="/img/lottery/centerback.png" id="rotateBack"></li>
            </ul>
        </div>
    </div>
    <div class="notice">
        <ul>
            <li>活动期间：{{ date('n',$prizeData['start_time']) }}月{{ date('d',$prizeData['start_time']) }}日-{{ date('n',$prizeData['end_time']) }}月{{ date('d',$prizeData['end_time']) }}日</li>
            {{--<li>关注“义乌购商城”微信号</li>
            <li>每天均可获得一次抽奖机会</li>
            <li>抽奖赢取红牛丰富大礼</li>--}}
            <li>{{ $prizeData['introduction'] }}</li>
            <li>注：本活动最终解释权归义乌购所有</li>
        </ul>
    </div>
    <img src="/img/lottery/_r3_c1.png" style="width: 100%">
    <div class="notice">
        <ul>
            <li>一等奖{{ $prizeData['first_prize_num'] }}名——{{ $prizeData['first_prize_name'] }}</li>
            <li>二等奖{{ $prizeData['second_prize_num'] }}名——{{ $prizeData['second_prize_name'] }}</li>
            <li>三等奖{{ $prizeData['third_prize_num'] }}名——{{ $prizeData['third_prize_name'] }}</li>
            @if($prizeData['forth_prize_num'] > 0)
                <li>四等奖{{ $prizeData['forth_prize_num'] }}名——{{ $prizeData['forth_prize_name'] }}</li>
            @endif
            @if($prizeData['fivth_prize_num'] >0 )
                <li>五等奖{{ $prizeData['fivth_prize_num'] }}名——{{ $prizeData['fivth_prize_name'] }}</li>
            @endif
        </ul>
    </div>
    <div class="mask"></div>
    <div class="resultBox prize">
        <ul>
            <li>恭喜您获得“{{ $prizeData['prize_name' ]}}”活动</li>
            <li class="prizeBox"></li>
            <li class="resultTips">{{ $prizeData['prize_intr'] }}</li>
            <li class="resultBtn"><span>确定</span></li>
        </ul>
    </div>
    <div class="resultBox noPrize">
        <ul>
            <li class="resultTitle">谢谢参与</li>
            {{--<li class="resultTips">不要气馁，喝瓶<span>红牛</span>再战</li>--}}
            <li class="resultBtn"><span>确定</span></li>
        </ul>
    </div>
    <script>


        $(function(){

            $('.resultBtn').click(function () {
                $('.mask').hide();
                $('.noPrize').hide();
                $('.prize').hide();
            });

            var turnSlow = function(){  //默认
                $("#rotateBack").rotate({
                    angle:0,  //起始角度
                    animateTo:2160,  //结束的角度
                    duration:2000000, //转动时间
                });
            };
            turnSlow();

            var timeOut = function(){  //超时函数
                $("#rotateBack").rotate({
                    angle:0,
                    duration: 10000,
                    animateTo: 2160,
                    callback:function(){
                        alert('您的网络不佳，请在wifi或4G环境下进行抽奖');
                        setTimeout(function () {
                            turnSlow();
                        }, 10000);
                    }
                });
            };
            var rotateFunc = function(angle,text,code){  //angle:奖项对应的角度，text:提示文字
                $('#rotateBack').stopRotate();
                $("#rotateBack").rotate({
                    angle:0,
                    duration: 5000,
                    animateTo: angle+1440,
                    callback:function(){
                        if(code!=0){
                            $('.mask').show();
                            $('.prize').find('.prizeBox').html(
                                    "<span>"+text+"</span>"
                            );
                            $('.prize').show();
                        }else {
                            $('.mask').show();
                            $('.noPrize').show();
                        }
                        $('.tips').html('<p>您还有<span>0</span>次抽奖机会</p>');
                    }
                });
            };

            $("#lotteryBtn").rotate({
                bind:
                {
                    click: function(){
                        $("#lotteryBtn").hide();
                        $('#back').show();
                        $.ajax({
                            type: 'POST',
                            url: '{{route('lottery.lotteryPost')}}',
                            data: {
                                _token:'{{csrf_token()}}',
                                lotteryId:'{{ $lotteryId }}'
                            } ,
                            success: function(data) {
                                rotateFunc(data['angle'],data['prize'],data['code']);
                            } ,
                            error : function() {
                                timeOut();
                            },
                            dataType: 'json'
                        });

                    }
                }

            });

        })
    </script>
@stop